<template>
  <el-dialog :show-close="true" :custom-class="'user-dialog'" :visible="dialogvisible" @close="$emit('update:dialogvisible', false)">
    <div class="avatar-box">
      <img :src="avatar ? avatar : imagePlaceholder" alt="user avatar" />
    </div>
    <div class="form-box">
      <el-upload drag action="/api/account/uploadavatar" :on-success="handleFileUploadSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处更换头像，或<em>点击上传头像</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogvisible = false">取消</el-button>
      <el-button type="primary" @click="submitClick">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  name: "UserDialog",
  props: ["avatar", "dialogvisible"],
  data() {
    return {
      imagePlaceholder:
        "",
    };
  },
  methods: {
    handleFileUploadSuccess(response, file, fileList) {
      this.avatar = response.data;
    },
    submitClick() {
      axios
        .post("/api/account/updateavatar", "avatarurl=" + this.avatar)
        .then((response) => {
          this.dialogvisible = false;
          this.$message({
            type: "success",
            message: response.data.message,
          });
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/scss/_variables";

.el-dialog.user-dialog {
  max-width: 400px;

  .el-dialog__header {
    padding: 0;

    .el-dialog__headerbtn {
      z-index: 1;
      background: rgba(0, 0, 0, 0.05);
      min-width: 18px;
      min-height: 18px;
      border-radius: 4px;

      .el-dialog__close {
        color: $background-color;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
  }

  .avatar-box {
    background: $text-color-accent;
    margin-bottom: 50px;
    position: relative;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: relative;
      bottom: -50px;
      display: block;
      margin: 0 auto;
      background: white;
      border: 2px solid $text-color-accent;
      box-sizing: border-box;
    }

    .star {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      background: white;
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 28px;
      font-size: 20px;
      border-radius: 50%;
      border: 2px solid $text-color-accent;
      cursor: pointer;
      margin-top: 35px;
      margin-left: 35px;

      .mdi-star {
        color: #ffd730;
      }
      .mdi-star-outline {
        opacity: 0.5;
      }
    }
  }

  .form-box {
    padding: 20px;
    box-sizing: border-box;

    & > * {
      margin: 10px 0;
    }
  }
}
</style>
